---
name: ReshapingContainer
route: /reshaping-container
menu: Composite experiences
---

import { Playground, Props } from 'docz';
import * as Common from '@element-motion/dev';
import TripeMenu from './TripeHoverMenu';
import NotificationPill from './NotificationPill';
import ReshapingContainer from '../index';
import * as Styled from './styled';

# ReshapingContainer

A composite experience that is made up of [Move](/move) and [Reveal](/reveal).

## Usage

<Playground>
  <NotificationPill />
</Playground>

```js
import { ReshapingContainer } from '@element-motion/core';

({ message, avatar }) => (
  <ReshapingContainer
    triggerKey={message}
    display="inline-block"
    boxShadow="rgba(32, 33, 36, 0.25) 0px 3px 6px"
    padding="4px 6px"
    borderRadius="20px"
    maxWidth="250px"
  >
    {motion => (
      <Styled.MessageNotification {...motion}>
        <Styled.Avatar src={avatar} />
        <Styled.NotificationText>{message}</Styled.NotificationText>
      </Styled.MessageNotification>
    )}
  </ReshapingContainer>
);
```

<Playground>
  <TripeMenu />
</Playground>

```js
import { ReshapingContainer } from '@element-motion/core';

({ children }) => (
  <ReshapingContainer
    triggerKey={children}
    boxShadow="0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025)"
    background="#fff"
    maxWidth="500px"
    borderRadius="3px"
    padding="16px"
  >
    {motion => <Styled.Menu {...motion}>{children}</Styled.Menu>}
  </ReshapingContainer>
);
```

<Playground>
  <Common.Toggler interval onIntervalSet={cur => (cur + 1) % 3}>
    {toggler => (
      <Styled.Container>
        <Styled.Background />

        <ReshapingContainer
          triggerKey={toggler.shown}
          id="reveal-reshaping-example"
          boxShadow="0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025)"
          background="#fff"
          maxWidth="500px"
          maxHeight="450px"
          borderRadius="3px"
          padding="16px"
          margin="0 auto"
        >
          {props => (
            <Styled.ModalDialog
              style={props.style}
              ref={props.ref}
              className={props.className}
            >
              <Styled.Header>tripe facts 🥩</Styled.Header>

              <Styled.Button
                onClick={() => toggler.set((toggler.shown + 1) % 3)}
              >
                👉 thank u, next
              </Styled.Button>

              <p>
                {!toggler.shown
                  ? `Beef tripe is made from the muscle wall (the interior mucosal lining is removed) of only the first three chambers of a cow's stomach: the rumen (blanket/flat/smooth tripe), the reticulum (honeycomb and pocket tripe), and the omasum (book/bible/leaf tripe).`
                  : toggler.shown == '1'
                  ? `Beef tripe. Beef tripe is made from the muscle wall (the interior mucosal lining
                  is removed) of only the first three chambers of a cow's stomach: the rumen
                  (blanket/flat/smooth tripe), the reticulum (honeycomb and pocket tripe), and the
                  omasum (book/bible/leaf tripe). It remains a popular dish in many parts of continental Europe such as France and Italy. In France, a very popular dish, sold in most supermarkets, is tripes à la mode de Caen.`
                  : `Washed tripe is more typically known as dressed tripe. To dress the tripe, the stomachs are cleaned and the fat trimmed off.[4] It is then boiled and bleached, giving it the white color more commonly associated with tripe as seen on market stalls and in butchers shops. The task of dressing the tripe is usually carried out by a professional tripe dresser. Dressed tripe was a popular, nutritious and cheap dish for the British working classes from Victorian times until the latter half of the 20th century.[5][6][7] While it is still popular in many parts of the world today, the number of tripe eaters, and consequently the number of tripe dressers, in the UK has rapidly declined. Tripe has come to be regarded as a pet food, as the increased affluence of postwar Britain has reduced the appeal of this once staple food.`}
              </p>
            </Styled.ModalDialog>
          )}
        </ReshapingContainer>
      </Styled.Container>
    )}

  </Common.Toggler>
</Playground>

## Props

<Props of={ReshapingContainer} />

## Gotchas

Be careful of collapsing margins when utilising this motion,
they will make the destination element jump around when revealing,
probably.
If you're seeing some odd behavior - maybe try a flex container instead.
